<template>
	<view>		
		<swiper-tab-head 
		:tabBars="tabBars" 
		:tabIndex="tabIndex"
		@tabtap="tabtap"></swiper-tab-head>
		
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{height:swiperheight+'px'}" 
			:current="tabIndex"
			@change="tabChange">
				<swiper-item v-for="(items,index) in newsList" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item,index1) in items.list" :key="index1">
								<index-list :item="item" :index="index"></index-list>
							</block>
							<!-- 上拉加载 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</template>
						<!-- 无内容默认 -->
						<template v-else>
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components:{
			indexList,
			swiperTabHead,
			loadMore,
			noThing
		},
		data() {
			return {
				swiperheight:500,
				tabIndex:0,
				tabBars:[
					{name:'关注',id:'guanzhu'},
					{name:'推荐',id:'tuijian'},
					{name:'体育',id:'tiyu'},
					{name:'热点',id:'redian'},
					{name:'财经',id:'caijing'},
					{name:'娱乐',id:'yule'}
				],
				newsList:[
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/img/pika.jpg",
								username:"木木的奇奇",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"img",
								titlepic:"../../static/img/1.webp",
								infonum:{
									index:2, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/img/hema.jpg",
								username:"昵称",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"video",
								titlepic:"../../static/img/2.webp",
								playnum:"20w",
								long:"2:47",
								infonum:{
									index:1, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/img/pika.jpg",
								username:"木木的奇奇",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"img",
								titlepic:"../../static/img/genggui.jpg",
								infonum:{
									index:2, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/img/hema.jpg",
								username:"昵称",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"video",
								titlepic:"../../static/img/kuailong.webp",
								playnum:"20w",
								long:"2:47",
								infonum:{
									index:1, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/img/pika.jpg",
								username:"木木的奇奇",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"img",
								titlepic:"../../static/img/huaxue.jpg",
								infonum:{
									index:2, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/img/hema.jpg",
								username:"昵称",
								isguanzhu:false,
								title:"万人敬仰背后的失落感",
								type:"video",
								titlepic:"../../static/img/nba.jpg",
								playnum:"20w",
								long:"2:47",
								infonum:{
									index:1, // 0:没有操作,1:顶,2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=> {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height
				}
			})
		},
		//监听搜索框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		},	
		//监听原生标题导航点击事件
		onNavigationBarButtonTap(e){
			switch (e.index) {
				case 1:
				uni.navigateTo({
					url:'../add-input/add-input'
				});
				 break;
			}
		},
		methods: {
			// 上拉加载
			loadmore(index){
				if(this.newsList[index].loadtext!=='上拉加载更多'){return;}
				//修改状态
				this.newsList[index].loadtext="加载中...";
				//获取数据
				setTimeout(()=>{
					//获取完成
					let obj = {
							userpic:"../../static/img/pika.jpg",
							username:"木木的奇奇",
							isguanzhu:false,
							title:"万人敬仰背后的失落感",
							type:"img",
							titlepic:"../../static/img/1.webp",
							infonum:{
								index:2, // 0:没有操作,1:顶,2:踩
								dingnum:11,
								cainum:11
							},
							commentnum:10,
							sharenum:10,
					};
					this.newsList[index].list.push(obj)
					this.newsList[index].loadtext='上拉加载更多'
				},1000)
			},
			// tabbar点击事件
			tabtap(index){
				this.tabIndex=index
			},
			// 滑动事件
			tabChange(e){
				this.tabIndex = e.detail.current
			}
		}
	}
</script>

<style>
</style>
